<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>
			Grid Component
		</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	
	<body>
		<form method="get">
			<table border=1>
			
				<thead>
					<tr>
						<td colspan=6>Drag the column header and drop it here to group by that column</td>
					</tr>
					<tr>
						<td class="tdthin">ProductID</td>
						<td class="tdwide">Product name</td>
						<td class="tdmedium">Unit Price</td>
						<td class="tdmedium">Quantity per Unit</td>
						<td class="tdmedium">Units in stock</td>
						<td>Discontinued</td>
					</tr>
					<tr>
						<td><input type="text" size="1" /></td>
						<td><input type="text"/></td>
						<td>
							<input type="text" size="10" />
							<input type="image" src="images/filter.jpg" name="controls" alt="Filter" />
						</td>
						<td><input type="text" size="13" /></td>
						<td>
							<input type="text" size="10" />
							<input type="image" src="images/filter.jpg" name="controls" alt="Filter" />
						</td>
						<td>
							<input type="checkbox" />
							<input type="image" src="images/filter.jpg" name="controls" alt="Filter" />
						</td>
					</tr>
				</thead>
				
				<tfoot>
					<tr>
						<td class="foot" colspan=2>
							<input type="image" src="images/left2.jpg" name="controls" alt="GoToFirst"/>
							<input type="image" src="images/left1.jpg" name="controls" alt="Previous"/>
							<input type="button" class="button" name="controls" value="1" />
							<input type="button" class="button" name="controls" value="2" />
							<input type="button" class="button" name="controls" value="3" />
							<input type="button" class="button" name="controls" value="4" />
							<input type="button" class="button" name="controls" value="5" />
							<input type="button" class="button" name="controls" value="6" />
							<input type="button" class="button" name="controls" value="7" />
							<input type="button" class="button" name="controls" value="8" />
							<input type="button" class="button" name="controls" value="9" />
							<input type="button" class="button" name="controls" value="10" />
							<span>...</span>
							<input type="image" src="images/right1.jpg" name="controls" alt="Next"/>
							<input type="image" src="images/right2.jpg" name="controls" alt="GoToLast"/>
						</td>
						<td class="foot" colspan=2>
							<label for="page_size">Page Size:</label>
							<select id="page_size">
								<option value="1">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
								<option value="5">5</option>
								<option value="5">6</option>
								<option value="5">7</option>
								<option value="5">8</option>
								<option value="5">9</option>
								<option value="5">10</option>
							</select>
						</td>
						<td class="foot-right" colspan=2>
							335104 items in 33511 pages						
						</td>
					</tr>
				</tfoot>
				
				<tbody>
					<tr>
						<td>1</td>
						<td>Chai</td>
						<td>$18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td><input type="checkbox" disabled="disabled"/></td>
					</tr>
					<tr>
						<td>2</td>
						<td>Chang</td>
						<td>$19.00</td>
						<td>24 - 12 oz bottles</td>
						<td>17</td>
						<td><input type="checkbox" disabled="disabled"/></td>
					</tr>
					<tr>
						<td>3</td>
						<td>Aniseed Syrup</td>
						<td>$10.00</td>
						<td>12 - 550 ml bottles</td>
						<td>13</td>
						<td><input type="checkbox" disabled="disabled"/></td>
					</tr>
					<tr>
						<td>4</td>
						<td>Chef Antons's Cajun Seasoning</td>
						<td>$22.00</td>
						<td>48 - 6 oz jars</td>
						<td>53</td>
						<td><input type="checkbox" disabled="disabled"/></td>
					</tr>
					<tr>
						<td>5</td>
						<td>Chef Anton's Gumbo Mix</td>
						<td>$21.35</td>
						<td>36 boxes</td>
						<td>0</td>
						<td><input type="checkbox" checked="checked" disabled="disabled"/></td>
					</tr>
					<tr>
						<td>6</td>
						<td>Grandma's Boysenberry Spread</td>
						<td>$25.00</td>
						<td>12 - 8 oz jars</td>
						<td>120</td>
						<td><input type="checkbox" disabled="disabled"/></td>
					</tr>
					<tr>
						<td>7</td>
						<td>Uncle Bob's Organic Dried Pears</td>
						<td>$30.00</td>
						<td>12 - 1 lb pkgs.</td>
						<td>15</td>
						<td><input type="checkbox" disabled="disabled"/></td>
					</tr>
					<tr>
						<td>8</td>
						<td>Nordwhoods Cranberry Sauce</td>
						<td>$40.00</td>
						<td>12 -12 oz jars</td>
						<td>6</td>
						<td><input type="checkbox" disabled="disabled"/></td>
					</tr>
					<tr>
						<td>9</td>
						<td>Mishi Cobe Niku</td>
						<td>$97.00</td>
						<td>18-500 g pkgs</td>
						<td>15</td>
						<td><input type="checkbox" checked="checked" disabled="disabled"/></td>
					</tr>
					<tr>
						<td>10</td>
						<td>Ikura/td>
						<td>$31.00</td>
						<td>12 - 200 ml jars</td>
						<td>31</td>
						<td><input type="checkbox" disabled="disabled"/></td>
					</tr>
				</tbody>
				
			</table>
		</form>
	</body>
</html>